<template>
  <el-card>
    <!-- 搜索框 -->
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入用户账号/评论" clearable v-model="queryForm.query"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initGetCommentlist">搜索</el-button>
    </el-row>
    <!-- 筛选 -->
    <el-row :gutter="20" class="header">
      <el-select v-model="queryForm.typeValue" class="m-2" placeholder="请选择评论类型">
        <el-option
          v-for="item in queryForm.type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" :icon="Search" @click="screen">筛选</el-button>
    </el-row>
    <!-- 表单 -->
    <el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="username" label="账户" width="100"  />
      <el-table-column prop="questionId" label="题目编号" width="100" />
      <el-table-column prop="comment" label="评论" show-overflow-tooltip />
      <el-table-column label="被举报" width="80" >
        <template #default="scope">
          <el-switch v-model="scope.row.isreport" :active-value="1" :inactive-value="0" @change="changeSwitch(scope.row.id, scope.row.isreport)"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="70">
        <template #default="scope">
          <el-button type="danger" size="small" @click="deleteComment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :page-size="queryForm.pagesize"
      :pager-count="5"
      layout="prev, pager, next"
      :total="queryForm.totle"
      :hide-on-single-page="queryForm.pagesize>=queryForm.totle"
      @current-change="handleCurrentChange"
      :current-page="queryForm.pagename"
    />
  </el-card>
</template>

<script setup>
  import { Search } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { getallcommentlist, setcomment, delcomment } from '@/api/comment'
  import { ElMessage, ElMessageBox } from 'element-plus'

  const queryForm = ref({
    query: '',
    type: [
      { label: '被举报', value: 1 },
      { label: '未被举报', value: 0 },
      { label: '请选择评论类型', value: -1 }
    ],
    typeValue: -1,
    pagename: 1,
    pagesize: 4,
    totle: 0
  })
  const tableData = ref([])
  const commentlist = ref([])
  const resultlist = ref([])

  // 查询问题列表
  const initGetCommentlist = async () => {
    // console.log(queryForm.value.query)
    const res = await getallcommentlist({
      param: queryForm.value.query
    })
    // console.log(res.commentlist)
    commentlist.value = res.commentlist
    resultlist.value = res.commentlist
    queryForm.value.totle = res.commentlist.length
    handleCurrentChange(1)
  }
  // 分页展示表格
  const initTableData = () => {
    const start = (queryForm.value.pagename - 1) * queryForm.value.pagesize
    let end = queryForm.value.pagename * queryForm.value.pagesize
    end = end < queryForm.value.totle ? end : queryForm.value.totle
    const arr = []
    for (let i = start; i < end; i++) {
      arr.push(resultlist.value[i])
    }
    tableData.value = arr
  }
  initGetCommentlist()
  // 改变分页
  const handleCurrentChange = (number) => {
    queryForm.value.pagename = number
    initTableData()
  }

  // 筛选
  const screen = () => {
    let arr = []
    if (queryForm.value.typeValue !== -1) {
      for (let i = 0; i < commentlist.value.length; i++) {
        if (commentlist.value[i].isreport === queryForm.value.typeValue) {
          arr.push(commentlist.value[i])
        }
      }
    } else {
      arr = commentlist.value
    }
    queryForm.value.totle = arr.length
    resultlist.value = arr
    handleCurrentChange(1)
  }

  // 为 Table 中的某一行添加 class
  const tableRowClassName = (row, rowIndex) => {
    if (row.row.isreport === 1) {
      return 'warning-row'
    }
    return ''
  }

  // 改变评论举报状态
  const changeSwitch = (id, isreport) => {
    setcomment({
      id,
      isreport
    }).then(res => {
      ElMessage({
        message: res.msg,
        type: 'success',
        duration: 1000
      })
    })
  }
  // 删除评论
  const deleteComment = (id) => {
    ElMessageBox.confirm(
      '是否删除该评论',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    .then(() => {
      delcomment({
        id
      }).then(res => {
        ElMessage.success(res.msg)
        initGetCommentlist()
      })
    })
  }
</script>

<style lang="scss" scoped>
  .header {
    padding-bottom: 16px;
    box-sizing: border-box;
  }
  ::v-deep .el-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  ::v-deep .el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  .m-2 {
    margin: 0 10px;
  }
  ::v-deep .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
</style>
